﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Online</title>
    <!-- Bootstrap -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!--<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>-->
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!--[endif]-->
    <link type="text/css" rel="stylesheet" href="__CSS__/mousse.css">
    <link type="text/css" rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <!--奥森图标-->
    <link type="text/css" rel="stylesheet" href="__FONT__/4.2.0/css/font-awesome.min.css">
    <script src="__JS__/jquery-3.2.1.min.js"></script>
    <script src="__JS__/bootstrap.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        .bb_pull-down{background:#efefef url() center bottom no-repeat;}
        .loadRefresh-over-box{width:100%;}
        .loadRefresh-over-box .slogan{width:100%}
        .loadRefresh-over-box p.refresh_slogan{width:100%;height:21px;margin:0;background:url() center 0 no-repeat;text-indent:-999em;overflow:hidden;-webkit-background-size:177px auto;background-size:177px auto}
        .loadRefresh-over-box .i-loading{width:13px;height:14px;margin-right:5px;display:inline-block;vertical-align:middle;background:url() no-repeat 0 0;background-size:155%}
        .loadRefresh-ing-box{height:61px;padding:20px 0 19px 0;background:#efefef}
        .i-loading2{-webkit-animation:loading 1s linear 0s infinite;animation:loading 1s linear 0s infinite}
        @-webkit-keyframes loading{0%{-webkit-transform:rotate(0)}
            100%{-webkit-transform:rotate(360deg)}
        }
        @keyframes loading{0%{transform:rotate(0)}
            100%{transform:rotate(360deg)}
        }
        .loadRefresh-over-box .i-loadingSucc,.loadText-box .i-loadingSucc{display:inline-block;width:13px;height:8px;margin-right:6px;border:2px solid #13b418;border-width:0 0 2px 2px;-webkit-transform:translate(0,-5px) rotate(-45deg);-ms-transform:translate(0,-5px) rotate(-45deg);-o-transform:translate(0,-5px) rotate(-45deg);transform:translate(0,-5px) rotate(-45deg)}
        .loadRefresh-over-box .i-loadingFailed{position:relative;margin-right:10px}
        .loadRefresh-over-box .i-loadingFailed::after,.loadRefresh-over-box .i-loadingFailed::before{position:absolute;top:50%;left:50%;content:"";background:#ee693b;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
        .loadRefresh-over-box .i-loadingFailed::before{width:2px;height:14px;margin-left:-1px;margin-top:-7px}
        .loadRefresh-over-box .i-loadingFailed::after{width:14px;height:2px;margin-top:-1px;margin-left:-7px}
        .loadText-box{position:relative;display:none;width:100%;height:35px;line-height:35px;text-align:center}
        .loadText-box p{font-size:12px;color:#666}
        .loadText-box .i-loading{width:12px;height:13px;margin-right:5px;display:inline-block;background:url() 0 0 no-repeat;background-size:19px auto;vertical-align:middle;-webkit-animation:loading 1s linear 0s infinite;animation:loading 1s linear 0s infinite}
        .loadText-box .i-loadingFailed{position:relative;margin-right:10px}
        .loadText-box .i-loadingFailed::after,.loadText-box .i-loadingFailed::before{position:absolute;top:50%;left:50%;content:"";background:#ee693b;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
        .loadText-box .i-loadingFailed::before{width:2px;height:14px;margin-left:-1px;margin-top:-7px}
        .loadText-box .i-loadingFailed::after{width:14px;height:2px;margin-top:-1px;margin-left:-7px}
        @-webkit-keyframes loading{0%{-webkit-transform:rotate(0)}
            100%{-webkit-transform:rotate(360deg)}
        }
        @keyframes loading{0%{transform:rotate(0)}
            100%{transform:rotate(360deg)}
        }
    </style>
</head>

<body  id="body">
<div   class="container-fluid"  style="padding: 0;margin: 0">


<!--&lt;!&ndash;导航&ndash;&gt;-->
<!--头部开始-->
<div class="container" style="background-color: black" >
    <div class="row"  style="padding: 1rem;line-height: 4rem">
        <div class="col-xs-12" >
            <a href="{:url('Index/index')}"  style="font-size: 1rem;color:white;">
                <span style="font-size: 1rem" class="glyphicon glyphicon-tint"></span>在线学习
            </a>
            <div class="pull-right">
            {$username.head_img_url}
            <a href="{:url('index/register_a')}" class="navbar-link">注册</a>
            </div>
        </div>
</div>
</div>

<div class="container" style="margin-top: 0.5rem">
    <form action="{:url('Course/index')}" method="post" id="course_form">
    <div class="input-group">
        <input type="text" class="form-control" id="course_value" name="course_name"  value="html5" aria-describedby="sizing-addon2">
        <div  class="btn btn-success input-group-addon"  onclick="submits()" id="sizing-addon2">搜索</div>
    </div>
    </form>
</div>
<!--头部结束-->

<!--轮播开始-->


    <div class="rows" style="margin-top: 0.5rem">
                <div id="myCarousel" class="carousel slide ">
                    <!-- 轮播（Carousel）指标 -->
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner text-center">
                        <div class="item active">
                            <img src="{$user.0.img}" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="{$user.1.img}" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="{$user.2.img}" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="{$user.3.img}" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="{$user.4.img}" alt="Second slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
             </div>
<!--轮播结束-->
<!--title开始-->
<div class="container ">
    <div class="row " style="padding: 0.5rem;" >
        <a class=" col-xs-2 col-xs-offset-1 btn " style="padding:0.2rem;font-size: 0.2rem;" href="{:url('Index/index')}">
            <div class="btn" style="background-color: #0a6aa1;color: white " href="">首页<br>
                <span class="glyphicon glyphicon-th-list"></span></div>
        </a>
        <a class=" col-xs-2 btn  " style="padding:0.2rem;font-size: 0.2rem;" href="{:url('Curriculum/index')}">
            <div class="btn" style="background-color: #0a6aa1 ;color: white " href="">课程<br>
                <span class="glyphicon glyphicon-th-list"></span></div>
        </a>
        <a class=" col-xs-2 btn  " style="padding:0.2rem;font-size: 0.2rem;" href="{:url('ActualCombat/index')}">
            <div class="btn" style="background-color: #0a6aa1 ;color: white " href="">实战<br>
                <span class="glyphicon glyphicon-th-list"></span></div>
        </a>
        <a class=" col-xs-2 btn  " style="padding:0.2rem;font-size: 0.2rem;" href="{:url('Index/zhiye')}">
            <div class="btn" style="background-color: #0a6aa1; color: white " href="">路劲<br>
                <span class="glyphicon glyphicon-th-list"></span></div>
        </a>
        <a class=" col-xs-2 btn  " style="padding:0.2rem;font-size: 0.2rem;" href="{:url('Index/ask')}">
            <div class="btn" style="background-color: #0a6aa1;color: white " href="">猿问<br>
                <span class="glyphicon glyphicon-th-list"></span></div>
        </a>


    </div>


</div>
<!--title结束-->
<div class="container-fluid" id="listWrapper"    style="padding: 0;margin: 0; background-image: url('__IMAGES__/f7246b600c33874412f14b22510fd9f9d72aa0bc -.jpg');
background-size: 100% 100% ;
background-repeat: no-repeat;">
<!--模块1开始-->
<!--循环开始-->
{notempty  name="array1"}
{volist name="array1" id="value"}
{notempty  name="$value.content"}
<div class="container" >
    <div class="row">
            <div class="center-block col-xs-4">{$value.name}</div>
           <span class="hide">{$value.id}</span>
        </div>
    </div>
    <!--小循环开始-->
{volist name="$value.content" id="val"}
<div class="container">
    <div class="row " style="margin: 0.5rem;height: 120px;background-color: rgba(240,236,231,0.08)">
        <div class=" col-sm-4 col-xs-4  " style="height: 100%;font-size: xx-small;background-image: url('__IMAGES__/su3.jpg');text-shadow:3px 1px 2px #fffdfe">
            <div style="color: #fff6f9;" >
            <br>
            <p style="border-bottom: 1px black solid">  {$val.record_name}</p>
            <p>  <strong>{$val.category}</strong></p>
            </div>
        </div>

        <div class=" col-sm-8 col-xs-8  text-left" style="height: 100%;padding: 0.3rem;background-color: white">
            <a href="{:url('Chapter/chaptershow')}?id={$val.id}">
                <!--简介：-->
            <div style="height: 60px ;font-size: 10px"> {$val.introduce}</div>
            <p> 具体难度：  {$val.difficulty}</p>
            <span style="color: #ff041d;" class="pull-right">￥{$val.charge} </span>
            </a>
        </div>
    </div>
    </div>
{/volist}
        <!--小循环结束-->
{/notempty}
{/volist}
{/notempty}

<!--循环结束-->
<!--模块1结束-->

<!--&lt;!&ndash;模块二开始&ndash;&gt;-->
<!--{notempty  name="array2"}-->
<!--{volist name="array2" id="value"}-->
<!--{notempty  name="$value.content"}-->
<!--<div class="container">-->
    <!--<div class="row">-->
        <!--<div class="col-sm-12 col-xs-12 ">-->
            <!--<br>-->
            <!--<h3>{$value.name}</h3>-->
            <!--<br>-->
        <!--</div>-->
            <!--&lt;!&ndash;循环开始&ndash;&gt;-->
            <!--{volist name="$value.content" id="val"}-->
            <!--<div class="col-sm-3 col-xs-6 module1" >-->
                <!--<a href="{:url('Chapter/chaptershow')}?id={$val.id}">-->
                <!--<div class="borders" >-->
                    <!--<div class="text-center colortitle" style="background-image: url('__IMAGES__/su3.jpg')" ><strong>-->
                    <!--</strong></div>-->
                    <!--<div style=" font-size: 3px;line-height: 3px;padding:1rem;">-->
                    <!--<p >{$val.introduce}</p>-->
                    <!--<p >难度：{$val.difficulty}</p>-->
                    <!--<p ><span class="pull-right">￥{$val.charge} 员</span></p>-->
                    <!--</div>-->
                <!--</div>-->
                <!--</a>-->
            <!--</div>-->
            <!--{/volist}-->

    <!--</div>-->
<!--</div>-->

<!--&lt;!&ndash;小循环结束&ndash;&gt;-->
<!--{/notempty}-->
<!--{/volist}-->
<!--{/notempty}-->
<!--模块二结束-->
</div>
<!--网页结尾开始-->
<div class="container">
    <div class="row">
        <div class="col-xs-12  row text-center ">
            <a href=""><i class="fa fa-weibo fa-2x fa-fa"></i></a>
            <a href=""><i class="fa fa-weixin fa-2x fa-fa"></i></a>
            <a href=""><i class="fa fa-tencent-weibo fa-2x fa-fa"></i></a>
            <a href=""><i class="fa fa-star fa-2x fa-fa"></i></a>
        </div>
        <div class="row col-xs-12 text-center">
                <a class="col-xs-4">企业合作</a>
                <a class="col-xs-4">人才招聘</a>
                <a class="col-xs-4">联系我们</a>
                <a class="col-xs-4">讲师招募</a>
                <a class="col-xs-4">常见问题</a>
                <a class="col-xs-4">意见反馈</a>
        </div>
        <div class="col-sm-12 text-center grey">
            <br><br>
            © 2017 imooc.com  京ICP备 13046642号-2<br><br>
        </div>
    </div>
</div>
 <!--网页结尾结束-->
</div>
</body>
</html>
<script src="__PUBLIC__/pull-master/dist/pull.min.js"></script>
<script>
    $('.carousel').carousel({
        interval: 2000
    });
    function submits() {
//        alert($("#course_value").val().trim());
        if($("#course_value").val().trim()!=""){
            $("#course_form").submit()
        }

    }
</script>
<script>
    var img="__IMAGES__";
    var courseurl="{:url('Chapter/chaptershow')}";
    var ajaxindex="{:url('Index/ajaxindex')}";
    var $listWrapper = $('#listWrapper');
    var videourl="{:url('Chapter/video')}";
      ids="";
    function getJsonLength(jsonData){
        var jsonLength = 0;

        for(var item in jsonData){

            jsonLength++;

        }

        return jsonLength;

    }
    var pullInstance = new Pull($listWrapper, {
        distance: 60,//滑动距离
//        onPullDown: function () {
//            setTimeout(function () {
//                Math.round(Math.random() + 0.2) ? handlePullDownSuccess() : handlePullDownFailed();
//            }, 1000);
//        },

        // 自定义下拉刷新dom，支持与默认模板混用，如果只配置某一项，其余则使用默认模板
        pullDownDom: {
            start: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>下拉可刷新</span></p></div></div>', // 下拉刷新前的html
            drop: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>释放可刷新</span></p></div></div>', // 下拉刷新触发提示的html
            loading: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading i-loading2"></i><span>刷新中...</span></p></div></div>', // 下拉刷新中的html
            success: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingSucc"></i><span>刷新成功</span></p></div></div>', // 下拉刷新成功的html
            failed: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingFailed"></i><span>未加载成功，稍后再试吧</span></p></div></div>', // 下拉刷新失败的html
        },

            onPullUp: function  () {
            setTimeout(function () {
                var id_s=$("span.hide");

                    ids=id_s.length;


                $.ajax({
                    url:ajaxindex,
                    type:"post",
                    dataType:"json",
                    data:{
                        ids:ids
                    },
                    success:function (data) {

                            handlePullUpSuccess(data);//成功函数
                    },
                    error:function (e) {
                        handlePullUpFailed();
                        alert("服务器出错了："+e.response)
                    }

                })


            }, 2000);
        },


    });

    var pullDownTotal = 0,
        pullUpTotal = 0;

    // 创建li dom
    function createList(str) {
        return '<li class="list-group-item">'+ str +'</li>';
    }

    // 处理下拉刷新成功
    function handlePullDownSuccess() {

        var count = Math.round(Math.random()*10);
        var htmlArr = [];

        while(count){
            count--;
            htmlArr.unshift(createList('item pullDown ' + pullDownTotal));
            pullDownTotal++;
        }

        $listWrapper.prepend($(htmlArr.join('')));

        pullInstance.pullDownSuccess();
    }

    // 处理下拉刷新失败
    function handlePullDownFailed() {
        pullInstance.pullDownFailed();
    }

    // 处理上拉加载成功
    function handlePullUpSuccess(data) {
            var tabname='<div class="container">' +
                ' <div class="row">' +
                ' <div class="col-sm-12 col-xs-12 ">' +
                '<br>' +
                ' <h3>'+data.name+'</h3>' +
                '<span class="hide">'+data.id+'</span>'+
                '<br>' +
                '  </div>';
                    for(var a=1;a<4;a++){
                        tabname+='            <div class="col-sm-3 col-xs-6 module1" >' +
                           '<a href="'+courseurl+'?id='+data.content["array"+a].id+'">' +
                '<div class="borders" >' +
                '<div class="text-center colortitle"  ><strong>' +
                           data.content["array"+a].record_name+
                '</strong></div>' +
                '<div style=" font-size: 3px;line-height: 1.2rem;padding:1rem;height:8rem ;">' +
               ' <p >'+data.content["array"+a].introduce+'</p>' +
            '<p >难度：'+data.content["array"+a].difficulty+'</p>' +
            '</div>' +
              '<p ><span class="pull-right">￥'+data.content["array"+a].charge+' 员</span></p>' +
            '</div>' +
            '</a>' +
            '</div> ';
                    }
        tabname+='</div></div>';
        $listWrapper.append(tabname);

        if(data.bug=="true"){
              pullInstance.pullUpDone();//已加载全部方法
        }else{

                pullInstance.pullUpSuccess();//下拉再次执方法
        }
    }

    // 处理上拉加载失败
    function handlePullUpFailed() {
        pullInstance.pullUpFailed();
    }


    function video(fileid) {
        $.ajax({
            url:videourl,
            type:"post",
            dataType:"json",
            data:{
                fileid:fileid
            },
            success:function (data) {
                alert(data.url);
                $("#video").attr("src","/thinkphp_5.0.9_full/public/20170719/31f9c6852cbc63d0f4102ac26f8bae01.MP4");
            },
            error:function(e){
                alert("视频播放出错 ".e.response)
            }
        })
    }
    function show(logoid,id) {
        if( $("#"+logoid).attr("class")=="glyphicon glyphicon-eye-close"){
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-open")
        }else{
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-close")
        }
//        alert(123)
        if( $("#"+id).css("display")=="block"){
            $("#"+id).css("display","none")
        }else{
//           alert($("#"+id));
            $("#"+id).css("display","block")
        }
    }

    var myVideo=document.getElementById("my-video");
    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    $(function(){
        $(".div1").mouseover(function(){
            $(this).css("backgroundColor","white");
        });
        $('.div1').mouseout(function(){
            $(this).css("backgroundColor","rgba(183, 183, 183, 0.14)");
        })
    })
	

    /*
     * 注意：
     * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
     * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
     * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
     * 邮箱地址：weixin-open@qq.com
     * 邮件主题：【微信JS-SDK反馈】具体问题
     * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
     */

    var title = $('title').eq(0).text();

    wx.config({
        debug: true,
        appId: '{$sign.appId}',
        timestamp: "{$sign.timestamp}",
        nonceStr: "{$sign.nonceStr}",
        signature: "{$sign.signature}",
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ],
        success: function () {

        }
    });

    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: "在线学习网，随时随地方便您的学习，让您的知识更丰富！", // 分享标题
            link: '{$sign.url}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://wx.qlogo.cn/mmopen/ajNVdqHZLLCp0UOjLLWlZ0rSN9vj0WsE3KmHYibZVYwXTCx3df5XuTPY4h8wPR3Dbiaajwg5Th6OGBlkjOrFALIQ/0', // 分享图标
            success: function () {
                alert("分享成功");
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
                alert('分享已取消');
            }
        });


        wx.onMenuShareAppMessage({
            title: "在线学习网！", // 分享标题
            desc: "在线学习网，随时随地方便您的学习，让您的知识更丰富！", // 分享描述
            link: "{$sign.url}", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,
            imgUrl: "http://wx.qlogo.cn/mmopen/ajNVdqHZLLCp0UOjLLWlZ0rSN9vj0WsE3KmHYibZVYwXTCx3df5XuTPY4h8wPR3Dbiaajwg5Th6OGBlkjOrFALIQ/0", // 分享图标
            type: "link", // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                alert("分享成功");
            },
            cancel: function () {
                alert('分享已取消');
            }
        });


    });
</script>
	
	
	

